<template>
    <view class="my-tabs-wrapper">
        <view class="tabs">
            <view :class="['tab', { 'active': active && (active.label === item.label) }]" v-for="(item, index) in data"
                :key="index" @click="click(item)">
                {{ item.label }}
            </view>
        </view>
        <view v-if="$slots.toolbar" class="toolbar">
            <slot name="toolbar"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'Tabs',
        props: {
            data: {
                type: Array,
                default: () => [{
                    label: '空数据示例1',
                    value: '1'
                }, {
                    label: '空数据示例2',
                    value: '2'
                }]
            },
        },
        data() {
            return {
                active: null
            };
        },
        watch: {
            data(value) {
                if (value) {
                    this.active = value[0];
                    this.$emit('input', this.active);
                }
            }
        },
        methods: {
            click(item) {
                this.active = item;
                this.$emit('click', item);
                this.$emit('input', this.active);
            }
        },
        mounted() {
            this.active = this.data[0];
            this.$emit('input', this.active);
        }
    }
</script>

<style scoped lang="scss">
    .my-tabs-wrapper {
        flex: 1;
        width: 100%;
        border-bottom: 1px solid #ccc;
        font-size: 2rem;
        display: flex;
        align-items: center;
        transition: all .2s ease;

        .tabs {
            flex: 1;
            display: flex;

            .tab {
                padding: 3rem;
                margin: 0 2rem;

                &.active {
                    border-bottom: 2px solid #40a7d9;
                    color: #40a7d9;
                }

                &:first-child {
                    margin-left: 0;
                }
            }
        }
        
        .toolbar {
            display: flex;
        }
    }
</style>